<template>
  <div class="workbench">
    <div class="lg:flex">
      <!-- <el-card
        class="!border-none mb-4 md:mr-4"
        shadow="never"
        :body-style="{
          width: '400px'
        }"
      >
        <template #header>
          <span class="card-title">平台信息</span>
        </template>
        <div>
          <div class="flex leading-9">
            <div class="mr-3">平台名称</div>
            <span> {{ workbenchData.version.name }}</span>
          </div>
          <div class="flex leading-9">
            <div class="mr-3">当前版本</div>

            <div class="flex">
              <div>{{ workbenchData.version.version }}</div>
              <div
                class="ml-4 text-danger cursor-pointer"
                v-if="workbenchData.isNewVersion"
              >
                有新的版本可用
              </div>
            </div>
          </div>
          <div class="flex leading-9">
            <div>
              <el-tag type="success" class="mr-2" effect="dark">
                <a href="https://www.likeshop.cn/" target="_blank">官网 </a>
              </el-tag>
              <el-tag type="danger" class="mx-1" effect="dark">
                <a href="https://www.likeshop.cn/doc" target="_blank">
                  开发文档
                </a>
              </el-tag>
            </div>
          </div>
        </div>
      </el-card> -->

      <el-card class="!border-none mb-4 flex-1" shadow="never">
        <template #header>
          <div>
            <span class="card-title">数据统计</span>
            <span class="ml-4 text-xs text-tx-secondary">
              更新时间：{{ workbenchData.today.time }}
            </span>
          </div>
        </template>

        <div class="flex flex-wrap">
          <div class="w-1/2 md:w-1/4">
            <div class="leading-10">今日销量（笔）</div>
            <div class="text-6xl">
              {{ workbenchData.today.todaySalesCount }}
            </div>
            <div class="text-xs text-tx-secondary">
              总销量：{{ workbenchData.today.totalSalesCount }}
            </div>
          </div>
          <div class="w-1/2 md:w-1/4">
            <div class="leading-10">今日销售金额（元）</div>
            <div class="text-6xl">
              {{ workbenchData.today.todaySalesAmount }}
            </div>
            <div class="text-xs text-tx-secondary">
              总销售金额：{{ `￥${workbenchData.today.totalSalesAmount}` }}
            </div>
          </div>
          <div class="w-1/2 md:w-1/4">
            <div class="leading-10">新增会员（人）</div>
            <div class="text-6xl">{{ workbenchData.today.todayNewUser }}</div>
            <div class="text-xs text-tx-secondary">
              总会员量：{{ workbenchData.today.totalNewUser }}
            </div>
          </div>
          <div class="w-1/2 md:w-1/4">
            <div class="leading-10">用户访问量（人）</div>
            <div class="text-6xl">{{ workbenchData.today.todayVisitor }}</div>
            <div class="text-xs text-tx-secondary">
              总访问量：{{ workbenchData.today.totalVisitor }}
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="mb-4 function">
      <el-card class="flex-1 !border-none" shadow="never">
        <template #header>
          <span>常用功能</span>
        </template>
        <div class="flex flex-wrap">
          <div
            v-for="item in workbenchData.menu"
            class="md:w-[12.5%] w-1/4 flex flex-col items-center"
            :key="item"
          >
            <router-link :to="item.url" class="flex flex-col items-center mb-3">
              <img width="40" height="40" :src="item.image" />
              <div class="mt-2">{{ item.name }}</div>
            </router-link>
          </div>
        </div>
      </el-card>
    </div>
    <div class="lg:flex">
      <el-card class="flex-1 !border-none md:mr-4 mb-4" shadow="never">
        <template #header>
          <span>销售额趋势图（近15天）</span>
        </template>
        <div>
          <v-charts
            style="height: 350px"
            :option="workbenchData.businessOption"
            :autoresize="true"
          />
        </div>
      </el-card>

      <el-card class="flex-1 !border-none md:mr-4 mb-4" shadow="never">
        <template #header>
          <span>用户访问量（近15天）</span>
        </template>
        <div>
          <v-charts
            style="height: 350px"
            :option="workbenchData.visitorOption"
            :autoresize="true"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import goods_lists from './images/goods_lists.png'
import goods_category from './images/goods_category.png'
import order from './images/order.png'
import staff from './images/staff.png'
import ad from './images/ad.png'
import index_decorate from './images/index_decorate.png'
import news_notice from './images/news_notice.png'
import set_payment from './images/set_payment.png'
import { getWorkbench } from '@/api/app'
import vCharts from 'vue-echarts'
// 表单数据
const workbenchData: any = reactive({
  version: {
    version: '', // 系统版本
    website: '' // 平台名称
  },
  today: {}, // 今日数据
  menu: [
    {
      name: '服务列表',
      image: goods_lists,
      url: '/service/lists'
    },
    {
      name: '服务分类',
      image: goods_category,
      url: '/service/category'
    },
    {
      name: '订单列表',
      image: order,
      url: '/order/lists'
    },
    {
      name: '师傅列表',
      image: staff,
      url: '/master_worker/index'
    },
    {
      name: '素材中心',
      image: ad,
      url: '/material/index'
    },
    {
      name: '首页装修',
      image: index_decorate,
      url: '/decorate/index'
    },
    {
      name: '消息通知',
      image: news_notice,
      url: '/setting/message/notice'
    },
    {
      name: '支付配置',
      image: set_payment,
      url: '/setting/payment/payment_config'
    }
  ], // 常用功能
  visitor: [], // 访问量
  business: [], // 销售额

  businessOption: {
    xAxis: {
      type: 'category',
      data: []
    },
    yAxis: {
      type: 'value'
    },
    itemStyle: {
      // 点的颜色。
      color: 'red'
    },
    tooltip: {
      trigger: 'axis'
    },
    series: [
      {
        name: '销售量',
        data: [],
        type: 'line'
      }
    ]
  },

  visitorOption: {
    xAxis: {
      type: 'category',
      data: []
    },
    yAxis: {
      type: 'value'
    },
    itemStyle: {
      // 点的颜色。
      color: 'red'
    },
    tooltip: {
      trigger: 'axis'
    },
    series: [
      {
        name: '访问量',
        data: [],
        type: 'line'
      }
    ]
  }
})

// 获取工作台主页数据
const getData = async () => {
  const res = await getWorkbench()
  workbenchData.version = res.version
  workbenchData.today = res.today
  workbenchData.visitor = res.visitor
  workbenchData.business = res.business

  // 写入数据
  workbenchData.visitorOption.xAxis.data = workbenchData.visitor.date
  workbenchData.visitorOption.series[0].data = workbenchData.visitor.list.data

  workbenchData.businessOption.xAxis.data = workbenchData.business.date
  workbenchData.businessOption.series[0].data = workbenchData.business.list.data
}

onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped></style>
